<script setup>
import {ref, watch} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import VContextMenu from "../../../components/menu/VContextMenu.vue";

const route = useRoute();
const $router = useRouter();

// 标签页数据
const tabs = ref([]);
// 当前激活的标签
const activeTab = ref('');

// 右键菜单状态
const tagsViewContextMenuRef = ref(null);
// 当前点击标签页
const currentTagsView = ref(null);
// 上下文菜单项
const contextMenuItems = ref([
  {label: '关闭当前', action: (data) => handleCloseTagsView(data, 'current')},
  {label: '关闭其他', action: (data) => handleCloseTagsView(data, 'others')},
  {label: '全部关闭', action: (data) => handleCloseTagsView(data, 'all')},
]);

/**
 * 监听当前浏览器地址栏的 route 路由地址是否发生变化，如果变了，则说明切换了菜单
 * 这个时候，就可以新添加一个标签页了
 */
watch(() => route?.path, (path) => {
  console.log('watch监听', route)
  activeTab.value = path;
  // 判断是否已经存在菜单了，如果已经存在，则不添加
  const existingTab = tabs.value.find(tab => tab?.path === path);
  // 不存在，则添加路由菜单到标签页数组里面
  if (!existingTab) {
    tabs.value.push({
      path: path,
      meta: route.meta
    });
  }
}, {deep: true, immediate: true});

// 标签切换
const handleTabChange = (path) => {
  console.log('标签切换了', path)
  $router.push(path);
};

// 关闭标签
const handleTabRemove = (path) => {
  // 是否存在标签页，存在才可以删除
  const index = tabs.value.findIndex(tab => tab?.path === path);
  // 如果不存在，则无需处理
  if (index === -1) {
    return;
  }
  // 从标签数据中删除
  tabs.value.splice(index, 1);
  // 如果已经没有标签页，则跳转到默认的标签页
  if (tabs.value.length === 0) {
    activeTab.value = '';
    goToMainPath();
    return;
  }
  // 如果关闭的是当前激活的标签
  if (path === activeTab.value) {
    // 跳转到前一个或者后一个标签，这里兼容删除的是第一个标签页的情况
    activeTab.value = tabs.value[index - 1]?.path || tabs.value[index]?.path;
    $router.push(activeTab.value);
  }
};

// 右键菜单
const openContextMenu = (event, tab) => {
  event.preventDefault();
  currentTagsView.value = tab;
  // 显示右键菜单
  tagsViewContextMenuRef?.value.open(event);
};

// 关闭标签页
const handleCloseTagsView = (tagsView, type) => {
  const path = tagsView?.path;
  if (type === 'current') {
    handleTabRemove(path);
  } else if (type === 'others') {
    tabs.value = tabs.value.filter(tab => tab?.path === path || tab?.meta?.affix);
    if (path !== activeTab.value) {
      $router.push(path);
    }
  } else if (type === 'all') {
    tabs.value = tabs.value.filter(tab => tab?.meta?.affix);
    if (tabs.value.length === 0) {
      activeTab.value = '';
      goToMainPath();
      return;
    } else {
      activeTab.value = tabs.value[0]?.path;
    }
    $router.push(activeTab.value);
  }
};

const goToMainPath = () => {
  $router.push('/main');
};

</script>
<template>
  <div class="tags-view">
    <!-- 标签页主体 -->
    <el-tabs v-if="activeTab" v-model="activeTab" type="card" @tab-change="handleTabChange"
             @tab-remove="handleTabRemove">
      <el-tab-pane v-for="tab in tabs" :key="tab.path" :name="tab.path" :closable="!tab.meta.affix">
        <template #label>
          <div @contextmenu.prevent="openContextMenu($event, tab)" class="tab-label">
            <el-icon v-if="tab.meta.icon">
              <component :is="tab.meta.icon"/>
            </el-icon>
            <span>{{ tab.meta.title }}</span>
          </div>
        </template>
      </el-tab-pane>
    </el-tabs>
    
    <!-- 引入右键菜单组件 -->
    <VContextMenu ref="tagsViewContextMenuRef" :items="contextMenuItems" :data="currentTagsView"/>
  </div>
</template>

<style scoped>
</style>